<template>
  <div class="register-info-container">
    <el-card class="register-info-card">
      <template #header>
        <div class="card-header">
          <span>注册信息完善</span>
        </div>
      </template>

      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="个人信息完善"></el-step>
        <el-step title="实名认证"></el-step>
        <el-step title="完成注册"></el-step>
      </el-steps>

      <div class="form-content">
        <el-form v-if="activeStep === 0" :model="personalInfoForm" :rules="personalInfoRules" ref="personalInfoFormRef" label-width="120px" class="personal-info-form">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="personalInfoForm.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-input v-model="personalInfoForm.education" placeholder="请输入学历"></el-input>
          </el-form-item>
          <el-form-item label="年收入" prop="annualIncome">
            <el-input v-model="personalInfoForm.annualIncome" placeholder="请输入年收入"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="personalInfoForm.email" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>
          <el-form-item label="常驻地与户口所在地是否一致" prop="addressConsistent">
            <el-radio-group v-model="personalInfoForm.addressConsistent">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>

        <el-form v-if="activeStep === 1" :model="realNameAuthForm" :rules="realNameAuthRules" ref="realNameAuthFormRef" label-width="120px" class="real-name-auth-form">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="realNameAuthForm.realName" placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCardNumber">
            <el-input v-model="realNameAuthForm.idCardNumber" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="completeRegistration">下一步</el-button>
          </el-form-item>
        </el-form>

        <div v-if="activeStep === 2" class="registration-complete">
          <i class="el-icon-circle-check success-icon"></i>
          <h2>注册完成！</h2>
          <p>感谢您的注册，您现在可以开始使用西湖分信用服务了。</p>
          <el-button type="primary" @click="goToLogin">前往登录</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeStep = ref(0)
const personalInfoFormRef = ref(null)
const realNameAuthFormRef = ref(null)

const personalInfoForm = reactive({
  gender: '',
  education: '',
  annualIncome: '',
  email: '',
  addressConsistent: true
})

const realNameAuthForm = reactive({
  realName: '',
  idCardNumber: ''
})

const personalInfoRules = reactive({
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请输入学历', trigger: 'blur' }
  ],
  annualIncome: [
    { required: true, message: '请输入年收入', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  addressConsistent: [
    { required: true, message: '请选择常驻地与户口所在地是否一致', trigger: 'change' }
  ]
})

const realNameAuthRules = reactive({
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  idCardNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ]
})

const nextStep = () => {
  if (activeStep.value === 0) {
    personalInfoFormRef.value.validate((valid) => {
      if (valid) {
        activeStep.value++
      } else {
        ElMessage.error('请填写完整个人信息')
      }
    })
  }
}

const prevStep = () => {
  activeStep.value--
}

const completeRegistration = () => {
  if (activeStep.value === 1) {
    realNameAuthFormRef.value.validate(async (valid) => {
      if (valid) {
        // 假设这里调用最终注册API
        // const registrationData = { ...personalInfoForm, ...realNameAuthForm };
        // await finalRegisterApi(registrationData);
        activeStep.value++
        ElMessage.success('注册信息已提交，即将完成注册。')
      } else {
        ElMessage.error('请填写完整实名认证信息')
      }
    })
  }
}

const goToLogin = () => {
  router.push('/login') // 跳转回登录页面
}

</script>

<style scoped>
.register-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url('https://via.placeholder.com/1920x1080/add8e6/FFFFFF?text=Background') no-repeat center center;
  background-size: cover;
}

.register-info-card {
  width: 800px;
  max-width: 90%;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.card-header {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.el-steps {
  margin-bottom: 40px;
}

.form-content {
  padding: 20px;
}

.personal-info-form, .real-name-auth-form {
  margin-top: 20px;
}

.registration-complete {
  text-align: center;
  margin-top: 40px;
}

.success-icon {
  font-size: 80px;
  color: #67C23A;
  margin-bottom: 20px;
}

.registration-complete h2 {
  margin-bottom: 10px;
  color: #303133;
}

.registration-complete p {
  color: #606266;
  margin-bottom: 30px;
}
</style> 